<template>
  <div class="app-container">
    <div class="weighing-container">
      <h2 class="title">车辆称重</h2>

      <div class="weight-display">
        <div class="weight-label">当前重量：</div>
        <div class="weight-value">{{ weightValue }}</div>
        <div class="weight-unit">千克</div>
      </div>

      <div class="button-container">
        <el-button
          type="primary"
          icon="el-icon-refresh"
          size="large"
          @click="getWeight"
          :loading="loading"
        >
          {{ loading ? '读取中...' : '读取重量' }}
        </el-button>
        <el-button
          type="primary"
          icon="el-icon-refresh"
          size="large"
          @click="updateWeight(1)"
        >
          {{ '回皮' }}
        </el-button>
        <el-button
          type="primary"
          icon="el-icon-refresh"
          size="large"
          @click="updateWeight(2)"
        >
          {{ '回毛' }}
        </el-button>
      </div>

      <div class="waybill-info" v-if="waybills.id">
        <el-card class="waybill-card">
          <div slot="header" class="clearfix">
            <span>运单信息</span>
          </div>
          <el-row :gutter="36">
            <el-col :span="12">
              <div class="waybill-item">
                <span class="label">车牌号：</span>
                <span class="value">{{ waybills.licensePlate || '-' }}</span>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="waybill-item">
                <span class="label">司机：</span>
                <span class="value">{{ waybills.driverName || '-' }}</span>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="36">
            <el-col :span="8">
              <div class="waybill-item">
                <span class="label">毛重：</span>
                <span class="value">{{ waybills.m || '-' }}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="waybill-item">
                <span class="label">皮重：</span>
                <span class="value">{{ waybills.p || '-' }}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="waybill-item">
                <span class="label">净重：</span>
                <span class="value">{{ waybills.j || '-' }}</span>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </div>


<!--      <div class="info-text" v-if="lastUpdateTime">-->
<!--        最后更新时间：{{ lastUpdateTime }}-->
<!--      </div>-->
    </div>
  </div>
</template>

<script>
import { getWeight } from "@/api/system/cars"
import { getWaybills,updateWaybills } from "@/api/system/purchWaybills"

export default {
  name: "Weighing",
  data() {
    return {
      weightValue: "0.000",
      loading: false,
      lastUpdateTime: "",
      // m: "",
      // p: "",
      // j: "",
      waybills:{},
      waybillId:""
    }
  },

  created() {
    const id  = this.$route.params.id;
    if (id) {
      this.getWaybills(id);
    }
  },

  methods: {

    updateWeight(type){
      if (!this.waybills.id) {
        this.$message.warning("未获取到运单信息");
        return;
      }

      let form = {
        id: this.waybills.id
      };

      // 根据按钮类型设置对应字段
      if (type == 1) {
        // 回皮 - 设置皮重
        form.p = parseFloat(this.weightValue);
        form.ptime = this.parseTime(new Date()); // 皮重时间
      } else if (type == 2) {
        // 回毛 - 设置毛重
        form.m = parseFloat(this.weightValue);
        form.mtime = this.parseTime(new Date()); // 毛重时间
      }

      // 如果毛重和皮重都存在，计算净重
      let currentM = form.m !== undefined ? form.m : (this.waybills.m ? parseFloat(this.waybills.m) : null);
      let currentP = form.p !== undefined ? form.p : (this.waybills.p ? parseFloat(this.waybills.p) : null);

      if (currentM !== null && currentP !== null) {
        let j = currentM - currentP;
        form.j = j;
        form.jtime = this.parseTime(new Date()); // 净重时间
      }

      // 更新运单信息
      updateWaybills(form).then(response => {
        this.$message.success("保存成功");
        // 重新获取运单信息以刷新显示
        this.getWaybills(this.waybills.id);
      }).catch(error => {
        console.error("保存失败:", error);
        this.$message.error("保存失败");
      });

    },


    getWaybills(id){
      getWaybills(id).then(response => {
        this.waybills = response.data;
        // this.m = response.data.m;
        // this.p = response.data.p;
        // this.j = response.data.j;

      })
    },


    getWeight() {
      this.loading = true
      getWeight().then(response => {
        this.weightValue = response.msg || "0.000"
        this.lastUpdateTime = this.parseTime(new Date())
        this.loading = false
      }).catch(() => {
        this.$message.error("读取重量失败")
        this.loading = false
      })
    }
  }
}
</script>

<style scoped>
.weighing-container {
  max-width: 600px;
  margin: 50px auto;
  padding: 30px;
  border: 1px solid #ebeef5;
  border-radius: 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  text-align: center;
}

.title {
  color: #303133;
  margin-bottom: 30px;
  font-size: 24px;
}

.weight-display {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 30px;
  padding: 20px;
  background-color: #f5f7fa;
  border-radius: 8px;
}

.weight-label {
  font-size: 18px;
  color: #606266;
  margin-right: 10px;
}

.weight-value {
  font-size: 36px;
  font-weight: bold;
  color: #409EFF;
  min-width: 150px;
}

.weight-unit {
  font-size: 18px;
  color: #606266;
  margin-left: 10px;
}

.button-container {
  margin-bottom: 20px;
}

.info-text {
  color: #909399;
  font-size: 14px;
}
</style>
